<template>
  <div class="knowledge-learning">
    <!-- 顶部区域 -->
    <div class="top-section">
      <div class="page-header">
        <button class="back-btn" @click="handleGoBack">
          <span class="back-icon">←</span>
          返回
        </button>
        <div class="header-content">
          <h1 class="page-title">{{ subCategory?.name }}</h1>
          <p class="page-subtitle">{{ getCategoryDescription() }}</p>
        </div>
      </div>
    </div>

    <!-- 主体区域（左右分栏） -->
    <div class="main-content">
      <!-- 左侧目录导航 -->
      <div class="left-sidebar">
        <div class="sidebar-header">
          <h3>📚 学习目录</h3>
          <div class="progress-info">
            <span class="progress-text">{{ completedTopics }}/{{ totalTopics }}</span>
            <div class="mini-progress">
              <div class="mini-progress-fill" :style="{ width: progressPercentage + '%' }"></div>
            </div>
          </div>
        </div>
        
        <div class="chapter-list">
          <div
            v-for="chapter in chapters"
            :key="chapter.id"
            class="chapter-item"
            :class="{ 
              active: selectedChapter?.id === chapter.id,
              completed: chapter.completed,
              current: chapter.current 
            }"
            @click="selectChapter(chapter)"
          >
            <div class="chapter-header">
              <div class="chapter-icon">
                <span v-if="chapter.completed" class="status-icon completed">✓</span>
                <span v-else-if="chapter.current" class="status-icon current">●</span>
                <span v-else class="status-icon pending">{{ chapter.icon }}</span>
              </div>
              <div class="chapter-info">
                <h4 class="chapter-title">{{ chapter.title }}</h4>
                <p class="chapter-duration">{{ chapter.duration }}</p>
              </div>
            </div>
            <div class="chapter-status">
              <span v-if="chapter.completed" class="status-badge completed">已完成</span>
              <span v-else-if="chapter.current" class="status-badge current">学习中</span>
              <span v-else class="status-badge pending">待学习</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="right-content">
        <div v-if="selectedChapter" class="content-area">
          <!-- 内容标题 -->
          <div class="content-header">
            <h2>{{ selectedChapter.title }}</h2>
            <div class="chapter-meta">
              <span class="meta-item">
                <span class="meta-icon">⏱️</span>
                {{ selectedChapter.duration }}
              </span>
              <span class="meta-item">
                <span class="meta-icon">📊</span>
                {{ getDifficultyText(selectedChapter.difficulty) }}
              </span>
            </div>
          </div>

          <!-- 学习内容 -->
          <div class="learning-content">
            <div class="content-section">
              <h3>📖 知识要点</h3>
              <div class="key-points">
                <div
                  v-for="(point, index) in selectedChapter.keyPoints"
                  :key="index"
                  class="key-point"
                >
                  <span class="point-number">{{ index + 1 }}</span>
                  <span class="point-text">{{ point }}</span>
                </div>
              </div>
            </div>

            <div class="content-section">
              <h3>💡 详细说明</h3>
              <div class="detailed-content" v-html="selectedChapter.detailedContent"></div>
            </div>

            <!-- 示例代码区 -->
            <div v-if="selectedChapter.codeExamples && selectedChapter.codeExamples.length > 0" class="content-section">
              <h3>💻 示例代码</h3>
              <div class="code-examples">
                <div
                  v-for="(example, index) in selectedChapter.codeExamples"
                  :key="index"
                  class="code-example"
                >
                  <div class="code-header">
                    <span class="code-title">{{ example.title }}</span>
                    <span class="code-language">{{ example.language }}</span>
                  </div>
                  <pre class="code-block"><code :class="'language-' + example.language">{{ example.code }}</code></pre>
                  <p class="code-description">{{ example.description }}</p>
                </div>
              </div>
            </div>

            <!-- 资源推荐区 -->
            <div class="content-section">
              <h3>🔗 学习资源</h3>
              <div class="resource-grid">
                <a
                  v-for="resource in selectedChapter.resources"
                  :key="resource.id"
                  :href="resource.url"
                  target="_blank"
                  class="resource-card"
                >
                  <div class="resource-icon">{{ resource.icon }}</div>
                  <div class="resource-info">
                    <h4 class="resource-title">{{ resource.title }}</h4>
                    <p class="resource-description">{{ resource.description }}</p>
                  </div>
                  <div class="resource-type">{{ resource.type }}</div>
                </a>
              </div>
            </div>

            <!-- 笔记功能 -->
            <div class="content-section">
              <h3>📝 学习笔记</h3>
              <div class="notes-area">
                <textarea
                  v-model="selectedChapter.userNotes"
                  class="notes-textarea"
                  placeholder="在这里记录你的学习心得、重点内容或疑问..."
                  rows="6"
                ></textarea>
                <div class="notes-actions">
                  <button class="save-notes-btn" @click="saveNotes(selectedChapter)">
                    <span class="btn-icon">💾</span>
                    保存笔记
                  </button>
                  <span class="notes-tip">笔记会自动保存到本地</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部操作区 -->
          <div class="content-actions">
            <div class="progress-section">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
              </div>
              <p class="progress-text">学习进度：{{ progressPercentage }}%</p>
            </div>
            
            <div class="action-buttons">
              <button
                v-if="!selectedChapter.completed"
                class="complete-btn"
                @click="completeChapter(selectedChapter)"
              >
                <span class="btn-icon">✓</span>
                完成本章学习
              </button>
              <button
                v-if="selectedChapter.completed"
                class="review-btn"
                @click="reviewChapter(selectedChapter)"
              >
                <span class="btn-icon">👁️</span>
                重新学习
              </button>
              
              <button
                v-if="hasNextChapter"
                class="next-chapter-btn"
                @click="goToNextChapter"
              >
                <span class="btn-icon">➡️</span>
                下一章
              </button>
              <button
                class="question-mode-btn"
                @click="goToQuestionMode"
              >
                <span class="btn-icon">✍️</span>
                去答题
              </button>
            </div>
          </div>
        </div>

        <!-- 未选择章节时的提示 -->
        <div v-else class="no-chapter-selected">
          <div class="empty-state">
            <div class="empty-icon">📚</div>
            <h3>选择学习章节</h3>
            <p>请从左侧目录中选择一个章节开始学习</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习完成提示弹窗 -->
    <div v-if="showCompletionModal" class="completion-modal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-icon">🎉</div>
          <h3>恭喜完成学习！</h3>
        </div>
        <div class="modal-body">
          <p>您已经完成了 <strong>{{ subCategory?.name }}</strong> 的所有学习内容</p>
          <div class="completion-stats">
            <div class="stat-item">
              <span class="stat-number">{{ totalTopics }}</span>
              <span class="stat-label">总章节</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ completedTopics }}</span>
              <span class="stat-label">已完成</span>
            </div>
          </div>
        </div>
        <div class="modal-actions">
          <button class="modal-btn secondary" @click="showCompletionModal = false">
            继续学习
          </button>
          <button class="modal-btn primary" @click="goToQuestionMode">
            🧠 进入答题模式检验学习效果
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "KnowledgeLearning",
  props: {
    subCategory: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedChapter: null,
      showCompletionModal: false,
      // 从路由参数获取分类信息
      categoryId: this.$route.params.categoryId,
      subCategoryId: this.$route.params.subCategoryId,
      chapters: [
        {
          id: 1,
          title: "集合框架概述",
          description: "了解Java集合框架的基本概念和体系结构",
          icon: "🔰",
          duration: "15分钟",
          difficulty: "easy",
          completed: true,
          current: false,
          keyPoints: [
            "集合框架的核心概念",
            "Collection和Map接口体系",
            "常用集合类的特点"
          ],
          detailedContent: `
            <p>Java集合框架是Java语言中最重要的API之一，它提供了一套完整的数据结构和算法实现。</p>
            <p>集合框架主要包含以下几个部分：</p>
            <ul>
              <li><strong>Collection接口</strong>：单列集合的根接口，定义了基本的集合操作</li>
              <li><strong>Map接口</strong>：双列集合的根接口，存储键值对数据</li>
              <li><strong>工具类</strong>：Collections和Arrays等工具类</li>
            </ul>
            <p>通过本部分的学习，您将能够理解集合框架的整体架构和设计思想。</p>
          `,
          codeExamples: [
            {
              title: "创建集合对象",
              language: "java",
              code: `// 创建ArrayList集合
List<String> list = new ArrayList<>();
list.add("Java");
list.add("Python");
list.add("JavaScript");

// 创建HashMap集合
Map<String, Integer> map = new HashMap<>();
map.put("Java", 1);
map.put("Python", 2);
map.put("JavaScript", 3);`,
              description: "展示如何创建和使用基本的集合对象"
            }
          ],
          resources: [
            { id: 1, title: "官方文档", description: "Oracle官方集合框架文档", url: "#", type: "文档", icon: "📄" },
            { id: 2, title: "视频教程", description: "集合框架详解视频", url: "#", type: "视频", icon: "🎥" },
            { id: 3, title: "实践练习", description: "在线编程练习", url: "#", type: "练习", icon: "💻" }
          ],
          userNotes: ""
        },
        {
          id: 2,
          title: "List接口详解",
          description: "深入学习List接口及其实现类",
          icon: "📋",
          duration: "25分钟",
          difficulty: "medium",
          completed: false,
          current: true,
          keyPoints: [
            "List接口的特点和常用方法",
            "ArrayList和LinkedList的区别",
            "性能优化和最佳实践"
          ],
          detailedContent: `
            <p>List接口是Collection接口的子接口，它是有序集合，允许重复元素。</p>
            <p>List接口的主要特点：</p>
            <ul>
              <li><strong>有序性</strong>：元素按照插入顺序排列</li>
              <li><strong>可重复</strong>：允许存储重复的元素</li>
              <li><strong>索引访问</strong>：可以通过索引访问元素</li>
            </ul>
            <p>常用的List实现类包括ArrayList和LinkedList，它们各有优缺点。</p>
          `,
          codeExamples: [
            {
              title: "List常用操作",
              language: "java",
              code: `List<String> list = new ArrayList<>();

// 添加元素
list.add("Apple");
list.add("Banana");
list.add("Orange");

// 获取元素
String first = list.get(0);

// 修改元素
list.set(1, "Grape");

// 删除元素
list.remove("Orange");

// 遍历集合
for (String item : list) {
    System.out.println(item);
}`,
              description: "展示List接口的常用操作方法"
            }
          ],
          resources: [
            { id: 4, title: "源码分析", description: "ArrayList源码深度解析", url: "#", type: "源码", icon: "🔍" },
            { id: 5, title: "性能对比", description: "ArrayList vs LinkedList", url: "#", type: "对比", icon: "⚡" }
          ],
          userNotes: ""
        },
        {
          id: 3,
          title: "Set接口详解",
          description: "学习Set接口及其实现类的特点",
          icon: "🎯",
          duration: "20分钟",
          difficulty: "medium",
          completed: false,
          current: false,
          keyPoints: [
            "Set接口的特点和实现",
            "HashSet和TreeSet的区别",
            "自定义对象的去重规则"
          ],
          detailedContent: `
            <p>Set接口是Collection接口的子接口，它不允许重复元素，是无序集合。</p>
            <p>Set接口的主要特点：</p>
            <ul>
              <li><strong>无重复</strong>：不允许存储重复的元素</li>
              <li><strong>无序性</strong>：元素没有固定的顺序</li>
              <li><strong>唯一性</strong>：通过equals和hashCode方法判断重复</li>
            </ul>
          `,
          codeExamples: [
            {
              title: "Set去重示例",
              language: "java",
              code: `Set<String> set = new HashSet<>();
set.add("Java");
set.add("Python");
set.add("Java"); // 重复元素，不会被添加

System.out.println(set.size()); // 输出：2
System.out.println(set); // 输出：[Java, Python]`,
              description: "展示Set集合的去重特性"
            }
          ],
          resources: [
            { id: 6, title: "HashSet原理", description: "HashSet底层实现原理", url: "#", type: "原理", icon: "🏗️" },
            { id: 7, title: "TreeSet排序", description: "TreeSet自然排序和定制排序", url: "#", type: "排序", icon: "📊" }
          ],
          userNotes: ""
        },
        {
          id: 4,
          title: "Map接口详解",
          description: "掌握Map接口及其实现类的使用",
          icon: "🗺️",
          duration: "30分钟",
          difficulty: "hard",
          completed: false,
          current: false,
          keyPoints: [
            "Map接口的特点和常用方法",
            "HashMap和TreeMap的区别",
            "线程安全的Map实现"
          ],
          detailedContent: `
            <p>Map接口是双列集合的根接口，它存储键值对数据，键不能重复。</p>
            <p>Map接口的主要特点：</p>
            <ul>
              <li><strong>键值对</strong>：存储键值对数据</li>
              <li><strong>键唯一</strong>：键不能重复，值可以重复</li>
              <li><strong>无序性</strong>：键值对没有固定的顺序</li>
            </ul>
          `,
          codeExamples: [
            {
              title: "Map基本操作",
              language: "java",
              code: `Map<String, Integer> map = new HashMap<>();

// 添加键值对
map.put("Java", 100);
map.put("Python", 85);
map.put("JavaScript", 90);

// 获取值
Integer score = map.get("Java");

// 检查键是否存在
boolean hasKey = map.containsKey("Python");

// 遍历Map
for (Map.Entry<String, Integer> entry : map.entrySet()) {
    System.out.println(entry.getKey() + ": " + entry.getValue());
}`,
              description: "展示Map接口的基本操作方法"
            }
          ],
          resources: [
            { id: 8, title: "HashMap原理", description: "HashMap底层实现详解", url: "#", type: "原理", icon: "🔬" },
            { id: 9, title: "线程安全", description: "ConcurrentHashMap使用指南", url: "#", type: "安全", icon: "🛡️" }
          ],
          userNotes: ""
        }
      ]
    }
  },
  computed: {
    completedTopics() {
      return this.chapters.filter(chapter => chapter.completed).length;
    },
    totalTopics() {
      return this.chapters.length;
    },
    progressPercentage() {
      return Math.round((this.completedTopics / this.totalTopics) * 100);
    },
    hasNextChapter() {
      if (!this.selectedChapter) return false;
      const currentIndex = this.chapters.findIndex(c => c.id === this.selectedChapter.id);
      return currentIndex < this.chapters.length - 1;
    }
  },
  mounted() {
    // 默认选择第一个章节
    if (this.chapters.length > 0) {
      this.selectChapter(this.chapters[0]);
    }
  },
  methods: {
    getCategoryDescription() {
      return "Java集合框架是Java语言中最重要的API之一，提供了一套完整的数据结构和算法实现。通过本课程，您将掌握集合框架的核心概念、常用类和最佳实践。";
    },
    
    selectChapter(chapter) {
      this.selectedChapter = chapter;
    },
    
    completeChapter(chapter) {
      chapter.completed = true;
      chapter.current = false;
      
      // 设置下一个未完成的章节为当前章节
      const nextChapter = this.chapters.find(c => !c.completed);
      if (nextChapter) {
        nextChapter.current = true;
        this.selectedChapter = nextChapter;
      }
      
      // 检查是否所有章节都完成了
      if (this.completedTopics === this.totalTopics) {
        this.showCompletionModal = true;
      }
      
      this.$message.success(`恭喜！您已完成"${chapter.title}"的学习`);
    },
    
    reviewChapter(chapter) {
      chapter.completed = false;
      chapter.current = true;
      this.$message.info(`您正在重新学习"${chapter.title}"`);
    },
    
    goToNextChapter() {
      const currentIndex = this.chapters.findIndex(c => c.id === this.selectedChapter.id);
      const nextChapter = this.chapters[currentIndex + 1];
      if (nextChapter) {
        this.selectChapter(nextChapter);
      }
    },
    
    saveNotes(chapter) {
      // 这里可以添加保存笔记的逻辑
      localStorage.setItem(`notes_${chapter.id}`, chapter.userNotes);
      this.$message.success('笔记保存成功！');
    },
    
    // 跳转到答题模式
    goToQuestionMode() {
      this.$router.push({
        name: 'learn-question-mode',
        params: {
          categoryId: this.categoryId,
          subCategoryId: this.subCategoryId
        }
      });
    },
    
    getDifficultyText(difficulty) {
      const difficultyMap = {
        easy: '简单',
        medium: '中等',
        hard: '困难'
      };
      return difficultyMap[difficulty] || '未知';
    },

    handleGoBack() {
      // 返回到模式选择页面
      this.$router.push({
        name: 'learn-mode',
        params: {
          categoryId: this.categoryId,
          subCategoryId: this.subCategoryId
        }
      });
    }
  }
}
</script>

<style scoped>
/* 知识学习页面 */
.knowledge-learning {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

/* 顶部区域 */
.top-section {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 24px 0;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.page-header {
  width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.back-btn {
  padding: 12px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #64748b;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  min-width: 80px;
  justify-content: center;
}

.back-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 16px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
  max-width: 600px;
}

/* 主体区域 */
.main-content {
  flex: 1;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 24px;
  gap: 24px;
  overflow: hidden;
  min-height: 0;
}

/* 左侧边栏 */
.left-sidebar {
  width: 320px;
  min-width: 280px;
  height: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 24px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.sidebar-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-text {
  font-size: 15px;
  color: #64748b;
  font-weight: 600;
  min-width: 60px;
}

.mini-progress {
  flex: 1;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.chapter-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  min-height: 0;
}

.chapter-item {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 8px;
  border-radius: 12px;
}

.chapter-item:hover {
  background: #f8fafc;
  transform: translateX(4px);
}

.chapter-item.active {
  background: #eff6ff;
  border-right: 4px solid #3b82f6;
  margin-right: 4px;
}

.chapter-item.completed {
  background: #f0fdf4;
}

.chapter-item.current {
  background: #eff6ff;
}

.chapter-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.chapter-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.status-icon {
  font-size: 18px;
}

.status-icon.completed {
  color: #10b981;
}

.status-icon.current {
  color: #3b82f6;
}

.status-icon.pending {
  color: #94a3b8;
}

.chapter-info {
  flex: 1;
  min-width: 0;
}

.chapter-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.chapter-duration {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.chapter-status {
  display: flex;
  justify-content: flex-end;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  min-width: 60px;
}

.status-badge.completed {
  background: #dcfce7;
  color: #166534;
}

.status-badge.current {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.pending {
  background: #f1f5f9;
  color: #64748b;
}

/* 右侧内容区 */
.right-content {
  flex: 1;
  height: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  min-height: 0;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  min-height: 0;
}

.content-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #f1f5f9;
}

.content-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 20px 0;
  line-height: 1.2;
}

.chapter-meta {
  display: flex;
  gap: 24px;
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #64748b;
  padding: 8px 16px;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.meta-icon {
  font-size: 18px;
}

/* 内容区域 */
.learning-content {
  margin-bottom: 32px;
}

.content-section {
  margin-bottom: 48px;
  padding: 24px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.content-section:last-child {
  margin-bottom: 0;
}

.content-section h3 {
  font-size: 22px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.key-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.key-point {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.key-point:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.point-number {
  background: #3b82f6;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.point-text {
  font-size: 16px;
  color: #374151;
  font-weight: 500;
  line-height: 1.5;
}

.detailed-content {
  line-height: 1.8;
  color: #374151;
  font-size: 16px;
  background: white;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.detailed-content p {
  margin-bottom: 18px;
}

.detailed-content ul {
  margin-bottom: 18px;
  padding-left: 28px;
}

.detailed-content li {
  margin-bottom: 10px;
}

.detailed-content strong {
  color: #1e293b;
  font-weight: 600;
}

/* 代码示例区 */
.code-examples {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.code-example {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.code-header {
  background: #1e293b;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #334155;
}

.code-title {
  font-size: 15px;
  font-weight: 600;
  color: #e2e8f0;
}

.code-language {
  background: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.code-block {
  background: #0f172a;
  color: #e2e8f0;
  padding: 20px;
  margin: 0;
  overflow-x: auto;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
}

.code-description {
  padding: 16px 20px;
  background: #f8fafc;
  margin: 0;
  font-size: 14px;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  line-height: 1.5;
}

/* 资源推荐区 */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.resource-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.resource-card:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.resource-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 12px;
  flex-shrink: 0;
}

.resource-info {
  flex: 1;
  min-width: 0;
}

.resource-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.resource-description {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.resource-type {
  background: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  min-width: 50px;
  flex-shrink: 0;
}

/* 笔记功能 */
.notes-area {
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.notes-textarea {
  width: 100%;
  padding: 20px;
  border: none;
  resize: vertical;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  background: #f8fafc;
  min-height: 120px;
}

.notes-textarea:focus {
  outline: none;
  background: white;
  box-shadow: inset 0 0 0 2px #3b82f6;
}

.notes-textarea::placeholder {
  color: #94a3b8;
}

.notes-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
}

.save-notes-btn {
  padding: 10px 20px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-notes-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.notes-tip {
  font-size: 13px;
  color: #64748b;
}

/* 底部操作区 */
.content-actions {
  padding: 24px 0;
  border-top: 2px solid #f1f5f9;
  margin-top: auto;
  background: #f8fafc;
}

.progress-section {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 32px;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: #e2e8f0;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 5px;
  transition: width 0.6s ease;
}

.progress-text {
  font-size: 15px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 0 32px;
}

.complete-btn,
.review-btn,
.next-chapter-btn,
.question-mode-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.complete-btn {
  background: #10b981;
  color: white;
}

.complete-btn:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.review-btn {
  background: #3b82f6;
  color: white;
}

.review-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.next-chapter-btn {
  background: #8b5cf6;
  color: white;
}

.next-chapter-btn:hover {
  background: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.question-mode-btn {
  background: #f59e0b;
  color: white;
}

.question-mode-btn:hover {
  background: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.btn-icon {
  font-size: 18px;
}

/* 未选择章节状态 */
.no-chapter-selected {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
}

.empty-state {
  text-align: center;
  color: #94a3b8;
  max-width: 400px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 24px;
  opacity: 0.6;
}

.empty-state h3 {
  font-size: 24px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 12px 0;
}

.empty-state p {
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

/* 完成提示弹窗 */
.completion-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 40px;
  max-width: 560px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e2e8f0;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  margin-bottom: 32px;
}

.modal-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.modal-header h3 {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.modal-body {
  margin-bottom: 36px;
}

.modal-body p {
  font-size: 18px;
  color: #64748b;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.completion-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 24px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  min-width: 100px;
}

.stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.modal-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.modal-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
}

.modal-btn.secondary {
  background: #f1f5f9;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.modal-btn.secondary:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.modal-btn.primary {
  background: #3b82f6;
  color: white;
}

.modal-btn.primary:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    padding: 20px;
    gap: 20px;
  }
  
  .left-sidebar {
    width: 300px;
    min-width: 260px;
  }
  
  .content-area {
    padding: 28px;
  }
  
  .content-section {
    padding: 20px;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }
  
  .left-sidebar {
    width: 100%;
    order: 2;
  }
  
  .right-content {
    order: 1;
  }
  
  .content-area {
    padding: 20px;
  }
  
  .content-section {
    padding: 16px;
    margin-bottom: 32px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .resource-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    padding: 24px;
    margin: 20px;
  }
  
  .completion-stats {
    flex-direction: column;
    gap: 16px;
  }
  
  .modal-actions {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .top-section {
    padding: 20px 0;
  }
  
  .page-header {
    padding: 0 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .page-subtitle {
    font-size: 14px;
  }
  
  .main-content {
    padding: 12px;
  }
  
  .content-area {
    padding: 16px;
  }
  
  .content-header h2 {
    font-size: 24px;
  }
  
  .chapter-meta {
    flex-direction: column;
    gap: 12px;
  }
  
  .content-section {
    padding: 16px;
    margin-bottom: 24px;
  }
  
  .content-section h3 {
    font-size: 20px;
  }
  
  .key-point {
    padding: 16px;
  }
  
  .point-text {
    font-size: 15px;
  }
  
  .detailed-content {
    padding: 16px;
    font-size: 15px;
  }
  
  .code-block {
    padding: 16px;
    font-size: 13px;
  }
  
  .resource-card {
    padding: 16px;
  }
  
  .notes-textarea {
    padding: 16px;
    font-size: 14px;
  }
  
  .complete-btn,
  .review-btn,
  .next-chapter-btn,
  .question-mode-btn {
    padding: 12px 24px;
    font-size: 14px;
    min-width: 120px;
  }
}
</style>
